body{
    background-color: #f6f6f6;
}
// 头部区域
header{
    width: 100%;
    height: 80px;
    // overflow: hidden;
    border-bottom: 4px solid #ff464e;
    background-color: #fff;
    .logo{
        width: 980px;
            height: 80px;
        //    overflow: hidden;
            margin: 0 auto;
            .logo-con{
                width: 196px;
                height: 43px;
                float: left;
                margin-top: 19px;
                margin-left: 2px;
                position: relative;
                a{
                    float: left;
                    height: 100%;
                    width: 100%;
                    position: absolute;
                    background: url(../img/header-total.gif) no-repeat ;
                    background-position: -80px -218px;
                }
            }
            .logo-con-right{
                width: 430px;
                height: 30px;
                float: left;
                position: relative;
                // background-color: #e2e2e2;
                margin-top: 28px;
                margin-left: 308px;
                a:nth-child(1){
                    float: left;
                    position: absolute;
                    width: 122px;
                    height: 30px;
                    background: url(../img/header-total.gif) no-repeat ;
                    background-position: 0px 0px;
                }
                span:nth-child(2){
                    float: left;
                    position: absolute;
                    margin-left: 142px;
                    margin-top: 5px;
                    width: 3px;
                    height: 18px;
                    background: url(../img/header-total.gif) no-repeat ;
                    background-position: -142px -5px;
                }
                a:nth-child(3){
                    float: left;
                    position: absolute;
                    margin-left: 164px;
                    width: 112px;
                    height: 30px;
                    background: url(../img/header-total.gif) no-repeat ;
                    background-position: -164px 0px;
                }
                span:nth-child(4){
                    float: left;
                    position: absolute;
                    margin-left: 296px;
                    margin-top: 5px;
                    width: 3px;
                    height: 18px;
                    background: url(../img/header-total.gif) no-repeat ;
                    background-position: -296px -5px;
                }
                a:nth-child(5){
                    float: left;
                    position: absolute;
                    margin-left: 318px;
                    width: 112px;
                    height: 30px;
                    background: url(../img/header-total.gif) no-repeat ;
                    background-position: -318px 0px;
                }
            }
    }
}
// 中心区域
main{
    min-height: 872px;
    width: 100%;
    background-color: #f6f6f6;
    .main-con{
        width: 980px;
        height: 453px;
        border: 1px solid #e2e2e2;
        margin: 0 auto;
        margin-top: 20px;
        background-color: #fff;
        .head{
            width: 100%;
            height: 66px;
            padding: 0px 50px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999;
            border-bottom: 1px solid #e2e2e2;
            div{
                color: #666;
                font-size: 12px;
            }
            span{
                color: red;
                font-size: 16px;
                &::after{
                    content: " / ";
                    font-size: 24px;
                    color: #e8e8e8;
                }
            }
            a{
                color: #008bce;
                text-decoration: none;
            }
        }
        // 用户登录
        .box-l{
            float: left;
            width: 272px;
            height: 380px;
            margin-top: 30px;
            margin-left: 162px;
            form{
                width: 100%;
                height: 100%;
                // border: 1px solid red;
                .user{
                    width: 100%;
                    height: 40px;
                    // border: 1px solid red;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 30px;
                    border: 1px solid #c6c6c6;
                    span{
                        width: 40px;
                        background: url(../img/name2.jpg) no-repeat center center;
                    }
                    input{
                        flex: 1;
                        font-size: 12px;
                        border: none;
                    }
                }
                div:nth-child(2){
                    span{
                        width: 40px;
                        background: url(../img/code2.jpg) no-repeat center center;
                    }
                }
            }
             // 状态--两周免登录
            .state{
                width: 100%;
                font-size: 14px;
                margin-top: 10px;
                span{
                    margin-left: 5px;
                    color: #5e5e5e;
                }
                a{
                    float: right;
                    color: #999;
                }
            }
            //登录按钮
            .sub{
                height: 40px;
                width: 260px;
                margin-top: 10px;
                margin-bottom: 32px;
                input{
                    width: 100%;
                    height: 100%;
                    color: #fff;
                    background-color: red;
                    border: none;
                    border-radius: 3px;
                    cursor: pointer;
                    &:hover{
                        background-color: rgb(255,90,90);
                    }
                }
            }
            .more{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                div{
                    font-size: 14px;
                    p{
                        margin-bottom: 10px;
                    }
                    a{
                        float: left;
                        width: 22px;
                        height: 22px;
                        // border: 1px solid red;
                        &:nth-child(odd){
                            margin: 0px 8px;
                            background: url(../img/new-login.gif) no-repeat 0px -170px;
                        }
                        &:nth-child(2){
                            background: url(../img/new-login.gif) no-repeat -210px -195px;
                        }
                        &:nth-child(4){
                            background: url(../img/new-login.gif) no-repeat -1px -141px;
                        }
                    }
                }
                // 手机快捷登录
                span{
                    i{
                        font-size: 22px;
                        position: relative;
                        bottom: -2px;
                        color: #666;
                    }
                    a{
                        font-size: 14px;
                        color: #666;
                        text-decoration: none;
                        &:hover{
                            text-decoration:underline;
                        }
                    }
                }
            }
            
        }
        .main-con-tp{
            float: left;
            width: 349px;
            height: 247px;
            margin-top: 30px;
            margin-left: 112px;
            background: url(../img/login-bj-ad.png) no-repeat ;
        }
    }
    .footer{
        width: 980px;
        height: 70px;
        margin: 0 auto;
        margin-top: 44px;
        ul{
            width: 855px;
            height: 13px;
            margin-top: 24px;
            margin-left: 80px;
            float: left;
            li{
                float: left;
                font-size: 12px;
                list-style: none;
                color: #666666;
                a{
                    text-decoration: none;
                    color: #666666;
                    float: left;
                    &:hover{
                        text-decoration: underline;
                        color: #ff464e;
                    }
                }
                
            }
            li:nth-child(1){
                margin-right: 4px;
                      
                  }
            span{
                float: left;
                width: 3px;
                height: 13px;
                background-color: #d5cac9;
                margin-left: 3px;
                margin-right: 4px;
            }
        }
        p{
            float: left;
            width: 350px;
            height: 12px;
            font-size: 12px;
            line-height: 12px;
            color: #666666;
            // margin-left: 270px;
            margin-top: 48px;

        }
    }
}